<template>
  <div>
    <a-row>
      <a-col :flex="1">
        <a-form
          :model="formModel"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
          label-align="left"
          ref="searchFormRef"
        >
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item field="number" label="酒类名称">
                <a-select
                  placeholder="请选择生产酒类型"
                  v-model="form.winetype_id"
                  allow-clear
                >
                  <a-option
                    v-for="(item, i) in winetypedata"
                    :key="i"
                    v-model="item.winetype_id"
                    :value="item.winetype_id"
                    :label="item.wine_name"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="name" label="是否定制">
                <a-select
                  placeholder="请选择是否定制"
                  v-model="form.product_costom"
                  allow-clear
                >
                  <a-option value="0" label="否"></a-option>
                  <a-option value="1" label="是"></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="name" label="是否入库">
                <a-select
                  placeholder="请选择是否入库"
                  v-model="form.product_type"
                  allow-clear
                >
                  <a-option value="1" label="未入库"></a-option>
                  <a-option value="2" label="已入库"></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="createdTime" label="生产日期">
                <a-range-picker style="width: 100%" v-model="form.produce_time" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <a-divider style="height: 84px" direction="vertical" />
      <a-col :flex="'86px'" style="text-align: right">
        <a-space direction="vertical" :size="18">
          <a-button type="primary" @click="getProducedataInfo">
            <template #icon>
              <icon-search />
            </template>
            {{ $t('searchTable.form.search') }}
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            {{ $t('searchTable.form.reset') }}
          </a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-divider style="margin-top: 0" />
  </div>
</template>

<script lang="ts" setup>
import { reactive,ref } from 'vue';

const props = defineProps({
  getProducedataInfo: { type: Function, default: () => {} },
  winetypedata: { type: Array, default: () => [] },
});
const searchFormRef = ref()

const form = reactive({
  winetype_id: '',
  product_costom: '',
  product_type: '',
  produce_time:''
});
const reset = () => {
  form.winetype_id = '';
  form.product_costom = '';
  form.product_type = '';
  form.produce_time = '';
  props.getProducedataInfo(1)
}
defineExpose({
  form,
});
</script>

<style scoped lang="less">
</style>